<!DOCTYPE html>
<html lang="zh-cn"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="common::head"></head>
<body>
<div th:replace="common::top"></div>
<br/>
<h2>编辑订单</h2>
<br/>
<form th:action="@{edit}" method="post" id="editForm">
    <div style="text-align:left; margin-left:185px;">
        <li th:text="'编号: ' + ${order.code}"></li>
        <li><span>产线: </span><span th:text="${order.confirm} ? '已上线':'未上线'"></span></li>
        <li th:text="'销售: ' + ${order.createUser}"></li>
        <li th:text="'创建时间: ' + ${order.createTime}"></li>
        <li><span>客户:</span>
            <select name="customId" style="width: 177px;">
                <option th:each="custom : ${customList}"
                        th:value="${custom.id}" th:text="${custom.name}"
                        th:selected="${custom.id} eq ${order.customId}">客户
                </option>
            </select>
        </li>
        <li>
            <label>金额:</label>
            <input name="amount" type="number" placeholder="金额(元)" step="0.01" required th:value="${order.contractAmount}">
        </li>
        <input type="number" name="id" th:value="${order.id}" hidden>
    </div>

    <table>
        <thead>
        <tr>
            <th>产品</th>
            <th>数量</th>
            <th>单价</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody id="batch">
        <tr id="template" style="display:none">
            <td>
                <select>
                    <option th:each="product : ${productList}" th:value="${product.id}"
                            th:text="${product.name}">
                    </option>
                </select>
            </td>
            <td><input type="number"></td>
            <td><input type="number" step="0.01"></td>
            <td><input type="text"></td>
            <td>
                <button type="button" onclick="del(event);">删除</button>
            </td>
        </tr>

        <tr th:each="item : ${batchList}">
            <td>
                <select>
                    <option th:each="product : ${productList}"
                            th:text="${product.name}" th:value="${product.id}"
                            th:selected="${product.id} eq ${item.productId}">
                    </option>
                </select>
            </td>
            <td><input type="number" th:value="${item.orderNum}" required></td>
            <td><input type="number" step="0.01" th:value="${item.price} / 100" required></td>
            <td><input type="text" th:value="${item.remark}"></td>
            <td style="display:none"><input type="number" th:value="${item.id}"></td>
            <td>
                <button type="button" onclick="del(event);">删除</button>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td><input type="button" value="添加产品" id="addProduct"></td>
        </tr>
        </tfoot>
    </table>

    <input type="submit" value="更新" style="width: 220px;">
</form>

<p>
    <a href="javascript:history.back(-1);">上一页</a>
    <a href="../index.html" th:href="@{/index.html}">主页</a>
</p>

<script>
    $("#editForm").submit(function(e){
        e.preventDefault();

        var arr = [];
        $("#batch tr:not(:first)").each(function(){
            var obj = {};
            obj.productId = $(this).find("td:eq(0) select").val();
            obj.orderNum = $(this).find("td:eq(1) input").val();
            obj.price = $(this).find("td:eq(2) input").val()*100;
            obj.remark = $(this).find("td:eq(3) input").val();
            obj.id = $(this).find("td:eq(4) input").val();
            arr.push(obj);
        });

        $.ajax({
            type: $("#editForm").attr("method"),
            url: $("#editForm").attr("action"),
            data: $("#editForm").serialize() + '&batchJson=' + JSON.stringify(arr) ,
            success: function(response){
                var obj = eval('(' + response + ')');
                if(obj.code==0){
                    alert(obj.message);
                }else{
                    alert("提交成功");
                }
                window.location.href="list.html";
            },
            error: function(response){
                alert("提交失败");
            }
        });
    });

    $("#addProduct").click(function(){
        var template = $("#template");
        var newElement = template.clone();
        newElement.attr("id","");
        newElement.css("display","table-row");
        newElement.find("input:not(:last)").attr("required",true);
        newElement.insertAfter($("#batch tr:last"));
    });

    function del(event){
        var result = confirm("是否删除");
        if(result){
            event.target.closest('tr').remove();
        }
    };


</script>
</body>
</html>